<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <h1>if语句的用法</h1>
    <h1 v-if="cases.result==='error'" style="color:red">{{ cases.title }}</h1>
    <h1 v-else-if="cases.result==='success'" style="color:green">{{ cases.title }}</h1>
    <h1 v-else style="color:black">{{ cases.title }}</h1>
    <br/>
    <br/>
    <br/>

    <h1>for语句的用法1: 独立使用v-for</h1>
    <h3 v-for="item in cases">
        <span>{{item.title}}</span>
    </h3>
    <br/>

    <h1>for语句的用法2: v-for和v-if合用</h1>
    <h3 v-for="item in cases">
        <span v-if="item.result==='success'">{{item.title}}</span>
    </h3>
</div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                cases: [
                    {
                        case_id: 1,
                        title: "你好，我是xxx",
                        result: "success"
                    },
                    {
                        case_id: 2,
                        title: "你好，我是yyy",
                        result: "success"
                    },
                    {
                        case_id: 3,
                        title: "你好，我是zzz",
                        result: "success"
                    },
                    {
                        case_id: 4,
                        title: "你好，我是AAA",
                        result: "fail"
                    },
                    {
                        case_id: 5,
                        title: "你好，我是BBB",
                        result: "fail"
                    }
                ]
            }
        },
        methods: {}
    }).mount("#app")
</script>
</html>